<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #ef4f59;
        }
        .container {
            width: 50%;
            margin: 50px auto;
        }
        .celu {
            position: absolute;
            width: 400px;
            height: 500px;
            background: #ecefe8;
            margin: 0px 0px;
            border-radius: 30px;
            border-top: 50px solid #212121;
            border-bottom: 50px solid #212121;
            border-left: 21px solid #212121;
            border-right: 21px solid #212121;
        }
        .celu::before {
            content: "";
            display: block;
            width: 21px;
            height: 21px;
            border-radius: 100%;
            background: gray;
            margin: -35px 192px;
        }
        .celu::after {
            content: "";
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: gray;
            margin: 560px 192px;
        }
        .s1 {
            position: absolute;
            width: 172px;
            height: 132px;
            background: white;
            margin: 70px 12px;
            overflow: hidden;
        }
        ul.tres {
            position: absolute;
            width: 152px;
            height: 353px;
            list-style: none;
            margin: 0 9px;
            -moz-animation: textmoveup 9s linear infinite;
            -ms-animation: textmoveup 9s linear infinite;
            -webkit-animation: textmoveup 9s linear infinite;
            -o-animation: textmoveup 9s linear infinite;
            animation: textmoveup 9s linear infinite;
        }
        ul.tres li {
            display: block;
        }
        ul.tres li:nth-child(1) {
            width: 152px;
            height: 12px;
            background: gray;
            margin: 21px 0px;
        }
        ul.tres li:nth-child(2) {
            width: 152px;
            height: 60px;
            background: #ffdf3e;
            margin: 21px 0px;
        }
        ul.tres li:nth-child(3) {
            width: 152px;
            height: 12px;
            background: gray;
            margin: 12px 0px;
        }
        ul.tres li:nth-child(4) {
            content: "";
            display: block;
            width: 152px;
            height: 60px;
            background: #00b36d;
            margin: 21px 0px;
        }
        ul.tres li:nth-child(5) {
            width: 152px;
            height: 12px;
            background: gray;
            margin: 12px 0px;
        }
        ul.tres li:nth-child(6) {
            content: "";
            display: block;
            width: 152px;
            height: 60px;
            background: #ef6e54;
            margin: 21px 0px;
        }
        .s2 {
            position: absolute;
            width: 172px;
            height: 132px;
            background: #00b36d;
            margin: 70px 217px;
            overflow: hidden;
        }
        .s2::before {
            content: "";
            display: block;
            width: 12px;
            height: 45px;
            background: #333;
            margin: 0px 132px;
        }
        .trian {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 12px solid #333;
            border-left: 7px solid transparent;
            margin: 0 137px;
        }
        .trian::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 12px solid #333;
            border-right: 7px solid transparent;
            margin: -12px -12px;
        }
        .s3 {
            position: absolute;
            width: 172px;
            height: 132px;
            background: white;
            margin: 221px 12px;
            overflow: hidden;
        }
        .s3::before {
            content: "";
            display: block;
            width: 60px;
            height: 50px;
            background: gray;
            margin: 12px 9px;
        }
        .s3::after {
            content: "";
            display: block;
            width: 83px;
            height: 50px;
            background: #eceec8;
            margin: -62px 80px;
        }
        ul.redon {
            position: absolute;
            display: block;
            width: 152px;
            margin: -3px 10px;
            list-style: none;
        }
        ul.redon li {
            display: block;
            width: 152px;
            height: 5px;
            background: gray;
            margin: 12px 0px;
        }
        .c1 {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background: #ffdf3e;
            margin: -3px 0px;
            -moz-animation: corre 3s alternate infinite;
            -ms-animation: corre 3s alternate infinite;
            -webkit-animation: corre 3s alternate infinite;
            -o-animation: corre 3s alternate infinite;
            animation: corre 3s alternate infinite;
        }
        .c2 {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background: #00b36d;
            margin: -3px 132px;
            -moz-animation: corre 3s alternate infinite;
            -ms-animation: corre 3s alternate infinite;
            -webkit-animation: corre 3s alternate infinite;
            -o-animation: corre 3s alternate infinite;
            animation: corre 3s alternate infinite;
        }
        .c3 {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background: #ef6e54;
            margin: -3px 0px;
            -moz-animation: corre 3s alternate infinite;
            -ms-animation: corre 3s alternate infinite;
            -webkit-animation: corre 3s alternate infinite;
            -o-animation: corre 3s alternate infinite;
            animation: corre 3s alternate infinite;
        }
        .s4 {
            position: absolute;
            width: 172px;
            height: 132px;
            background: transparent;
            margin: 221px 217px;
            overflow: hidden;
        }
        .s4::before {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background: rgba(255, 255, 255, .3);
            margin: 39px 60px;
        }
        .s4::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-left: 16px solid white;
            border-bottom: 12px solid transparent;
            margin: -75px 80px;
        }
        .s4::before {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background: rgba(255, 255, 255, .3);
            margin: 39px 60px;
        }
        .s4::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-left: 16px solid white;
            border-bottom: 12px solid transparent;
            margin: -78px 80px;
        }
        .s44 {
            position: absolute;
            width: 172px;
            height: 132px;
            background: white;
            margin: -128px 0px;
            -moz-animation: costado 1s linear;
            -ms-animation: costado 1s linear;
            -webkit-animation: dale 1s linear infinite;
            -o-animation: costado 1s linear;
            animation: costado 1s linear;
            overflow: hidden;
        }
        .s44::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 90px solid #00b36d;
            margin: 35px 21px;
            -moz-animation: arriba 2s alternate infinite;
            -ms-animation: arriba 2s alternate infinite;
            -webkit-animation: arriba 2s alternate infinite;
            -o-animation: arriba 2s alternate infinite;
            animation: arriba 2s alternate infinite;
        }
        .s44::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid #ef6e54;
            margin: -99px 70px;
        }
        .sol {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: #ffdf3e;
            margin: -132px 21px;
            -moz-animation: costado 2s alternate infinite;
            -ms-animation: costado 2s alternate infinite;
            -webkit-animation: costado 2s alternate infinite;
            -o-animation: costado 2s alternate infinite;
            animation: costado 2s alternate infinite;
        }
        .youtub {
            position: relative;
            display: block;
            width: 172px;
            height: 9px;
            background: gray;
            margin: -5px 0px;
        }
        .youtub::before {
            content: "";
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            background: #f66;
            margin: -3px 0px;
            -moz-animation: costado 1s linear;
            -ms-animation: costado 1s linear;
            -webkit-animation: corre5 4s linear infinite;
            -o-animation: costado 1s linear;
            animation: costado 1s linear;
        }
        .s5 {
            position: absolute;
            width: 172px;
            height: 30px;
            background: white;
            margin: 373px 12px;
        }
        ul.star {
            position: absolute;
            width: 177px;
            height: 30px;
            margin: 0px -3px;
            list-style: none;
        }
        ul.star li {
            display: inline-block;
            margin: -3px 4px;
        }
        ul.star li:nth-child(1) {
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #00b36d;
            border-left: 12px solid transparent;
            -moz-transform: rotate(35deg);
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            -moz-animation: agranda 3s linear infinite;
            -ms-animation: agranda 3s linear infinite;
            -webkit-animation: agranda 3s linear infinite;
            -o-animation: agranda 3s linear infinite;
            animation: agranda 3s linear infinite;
        }
        ul.star li:nth-child(1)::before {
            content: "";
            display: block;
            color: blue;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 4px solid transparent;
            border-bottom: 12px solid #00b36d;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(-35deg);
            -moz-transform: rotate(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(0eg);
            margin: -7px -7px;
        }
        ul.star li:nth-child(1)::after {
            position: absolute;
            display: block;
            color: red;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #00b36d;
            border-left: 12px solid transparent;
            -webkit-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            content: '';
            margin: 0px -2px;
        }
        ul.star li:nth-child(2) {
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #ef6e54;
            border-left: 12px solid transparent;
            -moz-transform: rotate(35deg);
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            -moz-animation: agranda 3.1s linear infinite;
            -ms-animation: agranda 3.1s linear infinite;
            -webkit-animation: agranda 3.1s linear infinite;
            -o-animation: agranda 3.1s linear infinite;
            animation: agranda 3.1s linear infinite;
        }
        ul.star li:nth-child(2)::before {
            content: "";
            display: block;
            color: blue;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 4px solid transparent;
            border-bottom: 12px solid #ef6e54;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(-35deg);
            -moz-transform: rotate(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(0eg);
            margin: -7px -7px;
        }
        ul.star li:nth-child(2)::after {
            position: absolute;
            display: block;
            color: red;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #ef6e54;
            border-left: 12px solid transparent;
            -webkit-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            content: '';
            margin: 0px -2px;
        }
        ul.star li:nth-child(3) {
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #00b36d;
            border-left: 12px solid transparent;
            -moz-transform: rotate(35deg);
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            -moz-animation: agranda 3.2s linear infinite;
            -ms-animation: agranda 3.2s linear infinite;
            -webkit-animation: agranda 3.2s linear infinite;
            -o-animation: agranda 3.2s linear infinite;
            animation: agranda 3.2s linear infinite;
        }
        ul.star li:nth-child(3)::before {
            content: "";
            display: block;
            color: blue;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 4px solid transparent;
            border-bottom: 12px solid #00b36d;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(-35deg);
            -moz-transform: rotate(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(0eg);
            margin: -7px -7px;
        }
        ul.star li:nth-child(3)::after {
            position: absolute;
            display: block;
            color: red;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #00b36d;
            border-left: 12px solid transparent;
            -webkit-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            content: '';
            margin: 0px -2px;
        }
        ul.star li:nth-child(4) {
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #ef6e54;
            border-left: 12px solid transparent;
            -moz-transform: rotate(35deg);
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            -moz-animation: agranda 3.3s linear infinite;
            -ms-animation: agranda 3.3s linear infinite;
            -webkit-animation: agranda 3.3s linear infinite;
            -o-animation: agranda 3.3s linear infinite;
            animation: agranda 3.3s linear infinite;
        }
        ul.star li:nth-child(4)::before {
            content: "";
            display: block;
            color: blue;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 4px solid transparent;
            border-bottom: 12px solid #ef6e54;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(-35deg);
            -moz-transform: rotate(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(0eg);
            margin: -7px -7px;
        }
        ul.star li:nth-child(4)::after {
            position: absolute;
            display: block;
            color: red;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #ef6e54;
            border-left: 12px solid transparent;
            -webkit-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            content: '';
            margin: 0px -2px;
        }
        ul.star li:nth-child(5) {
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #00b36d;
            border-left: 12px solid transparent;
            -moz-transform: rotate(35deg);
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            -moz-animation: agranda 3.4s linear infinite;
            -ms-animation: agranda 3.4s linear infinite;
            -webkit-animation: agranda 3.4s linear infinite;
            -o-animation: agranda 3.4s linear infinite;
            animation: agranda 3.4s linear infinite;
        }
        ul.star li:nth-child(5)::before {
            content: "";
            display: block;
            color: blue;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 4px solid transparent;
            border-bottom: 12px solid #00b36d;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(-35deg);
            -moz-transform: rotate(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(0eg);
            margin: -7px -7px;
        }
        ul.star li:nth-child(5)::after {
            position: absolute;
            display: block;
            color: red;
            top: 0px;
            left: -10px;
            width: 0px;
            height: 0px;
            border-right: 12px solid transparent;
            border-bottom: 7px solid #00b36d;
            border-left: 12px solid transparent;
            -webkit-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            content: '';
            margin: 0px -2px;
        }
        .s6 {
            position: absolute;
            width: 172px;
            height: 30px;
            background: #ef6e54;
            margin: 373px 217px;
        }
        .s2 h1 {
            color: white;
            font-size: 2.1em;
        }
        h1 {
            font-family: Verdana;
            font-size: 1.2em;
            text-align: center;
            color: #333;
        }
        .s7 {
            position: absolute;
            width: 182px;
            height: 112px;
            margin: 421px 112px;
            overflow: hidden;
        }
        ul.sli {
            position: absolute;
            width: 590px;
            height: 112px;
            list-style: none;
            -moz-animation: sli 12s linear infinite;
            -ms-animation: sli 12s linear infinite;
            -webkit-animation: sli 12s linear infinite;
            -o-animation: sli 12s linear infinite;
            animation: sli 12s linear infinite;
            animation-delay: 3s;
        }
        ul.sli li {
            display: inline-block;
            width: 172px;
            height: 112px;
            background: white;
            margin-left: 12px;
        }
        ul.sli li:nth-child(1) {
            background: #ffdf3e;
        }
        ul.sli li:nth-child(1)::before,
        ul.sli li:nth-child(2)::before,
        ul.sli li:nth-child(3)::before {
            content: "";
            display: block;
            width: 90px;
            height: 90px;
            border-radius: 100%;
            background: white;
            margin: 12px 43px;
        }
        ul.sli li:nth-child(1)::after {
            content: "";
            display: block;
            width: 21px;
            height: 25px;
            border-radius: 100%;
            background: #ef6e54;
            margin: -50px 77px;
        }
        ul.sli li:nth-child(2) {
            background: #00b36d;
        }
        ul.sli li:nth-child(2)::after {
            content: "";
            display: block;
            width: 30px;
            height: 5px;
            background: #ef6e54;
            margin: -40px 73px;
        }
        ul.sli li:nth-child(3) {
            background: #ef6e54;
        }
        ul.sli li:nth-child(3)::after {
            content: "";
            display: block;
            width: 30px;
            height: 16px;
            border-radius: 0 0 30px 30px;
            background: #ef6e54;
            margin: -40px 73px;
        }
        @-webkit-keyframes textmoveup {
            0% {
                margin-top: 0px;
            }
            100% {
                margin-top: -221px;
            }
        }
        @-moz-keyframes textmoveup {
            0% {
                margin-top: 0px;
            }
            100% {
                margin-top: -221px;
            }
        }
        @keyframes textmoveup {
            0% {
                margin-top: 0px;
            }
            100% {
                margin-top: -221px;
            }
        }
        @-webkit-keyframes corre {
            100% {
                margin-left: 50px;
            }
        }
        @-moz-keyframes corre {
            100% {
                margin-left: 50px;
            }
        }
        @keyframes corre {
            100% {
                margin-left: 50px;
            }
        }
        @keyframes arriba {
            0% {
                margin-top: 192px;
            }
            50% {
                margin-top: 35px;
            }
            70% {
                margin-top: 35px;
            }
            75% {
                margin-top: 35px;
            }
            100% {
                margin-top: 35px;
            }
        }
        @-webkit-keyframes arriba {
            0% {
                margin-top: 192px;
            }
            50% {
                margin-top: 35px;
            }
            70% {
                margin-top: 35px;
            }
            75% {
                margin-top: 35px;
            }
            100% {
                margin-top: 35px;
            }
        }
        @-moz-keyframes arriba {
            0% {
                margin-top: 192px;
            }
            50% {
                margin-top: 35px;
            }
            70% {
                margin-top: 35px;
            }
            75% {
                margin-top: 35px;
            }
            100% {
                margin-top: 35px;
            }
        }
        @keyframes costado {
            0% {
                margin-left: -30px;
            }
            100% {
                margin-left: 21px;
            }
        }
        @-webkit-keyframes costado {
            0% {
                margin-left: -30px;
            }
            100% {
                margin-left: 21px;
            }
        }
        @-moz-keyframes costado {
            0% {
                margin-left: -30px;
            }
            100% {
                margin-left: 21px;
            }
        }
        @keyframes corre5 {
            100% {
                margin-left: 159px;
            }
        }
        @-webkit-keyframes corre5 {
            100% {
                margin-left: 159px;
            }
        }
        @-moz-keyframes corre5 {
            100% {
                margin-left: 159px;
            }
        }
        @keyframes agranda {
            0% {
                opacity: 0.3;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes agranda {
            0% {
                opacity: 0.3;
            }
            100% {
                opacity: 1;
            }
        }
        @-moz-keyframes agranda {
            0% {
                opacity: 0.3;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes sli {
            100% {
                margin-left: -387px;
            }
        }
        @-webkit-keyframes sli {
            100% {
                margin-left: -387px;
            }
        }
        @-moz-keyframes sli {
            100% {
                margin-left: -387px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="celu">
        <div class="s1">
            <ul class="tres">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="s2"><span class="trian"></span>
            <h1>Hello</h1>
        </div>
        <div class="s3">
            <ul class="redon">
                <li>
                    <div class="c1"></div>
                </li>
                <li>
                    <div class="c2"></div>
                </li>
                <li>
                    <div class="c3"></div>
                </li>
            </ul>
        </div>
        <div class="s4">
            <div class="s44"><span class="sol"></span>
            </div>
            <div class="youtub"></div>
        </div>
        <div class="s5">
            <ul class="star">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="s6">
            <h1>Enjoy</h1>
        </div>
        <div class="s7">
            <ul class="sli">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>